<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
	function fnT(){
		var myTime = new Date();
    	var iHou = myTime.getHours();
   	 	var iMin = myTime.getMinutes();
   	 	var iSec = myTime.getSeconds();
		var oP = document.getElementById('p1');
		var aImg = document.getElementsByTagName('img');
		
		var str = toTwo(iHou)+toTwo(iMin)+toTwo(iSec);
   		oP.innerHTML = str;
		
		var arr = [0,1,3,4,6,7];		//需要变化的图片的位置
		
		for(var i=0;i< arr.length;i++){
			aImg[arr[i]].src = 'img/'+ str.charAt(i) +'.jpg';
		}
		
		/*str.charAt(5);
		aImg[7].src = 'img/'+ str.charAt(5) +'.jpg';
		str.charAt(4);
		aImg[6].src = 'img/'+ str.charAt(4) +'.jpg';
		str.charAt(3);
		aImg[4].src = 'img/'+ str.charAt(3) +'.jpg';*/
	}
	fnT();
	setInterval(fnT,1000);
	
	
}

function toTwo(n){
	return n<10 ? '0'+n : ''+n;
}
</script>
</head>
<body>
<p id="p1" style="font-size:30px;"></p>
<img src="img/0.jpg">
<img src="img/0.jpg">
<img src="img/colon.jpg">
<img src="img/0.jpg">
<img src="img/0.jpg">
<img src="img/colon.jpg">
<img src="img/0.jpg">
<img src="img/0.jpg">
</body>
</html>
